<template>
	<view>
		<view class="flex row-between bg-white p-r-30 p-l-30" style="height: 200upx;line-height: 40upx;">
			<view class="">
				<view class="bold xxl" v-show="type=='CHANGE'">请告知我们更换原因，我们会努力改善！</view>
				<view class="bold xxl" v-show="type!='CHANGE'">请您告诉我们取消原因，我们会努力改进！</view>
			</view>
	
		</view>
		<view class="m-t-2 bg-white">
			<reason-list :list="list" :itemActive="itemActive" @itemClick="itemClick" ref="reason" @fatherClick="fatherClick" @inputChange="inputChange"></reason-list>
			
		</view>
		<view class="bottom-con">
			<view class="bottom-btn text-center" :class="{active:itemActive}" @click="changeDriverFun">
				确定{{type=='CHANGE'?'更换':'取消'}}
			</view>
			<view class="consider-btn flex-content" @click="uppage">
				再考虑一下
			</view>
		</view>
	</view>
</template>

<script>
	import {changeDriver,changeReason,cancelOrder} from '@/api/order';
	export default {
		data() {
			return {
				otherList:{
					id:-1,
					name:'其他原因',
					reason:[]
				},
				
				type:null,
				id:null,
				itemActive:'',
				list:[],
				father:null,
			}
		},
		methods: {
			uppage(){
				uni.navigateBack({
					
				})
			},
			inputChange(flag){
				if(flag){
					this.itemActive = -1;
				}
				else{
					this.itemActive = '';
				}
			},
			fatherClick(){
				this.itemActive = ''
			},
			changeReasonFun(){
				changeReason().then(res=>{
					this.list  =res.data.lists
					this.list.push(this.otherList)
				})
			},
			itemClick({father,id}){
				this.$refs.reason.otherModel = '';
				if(this.itemActive == id){
					this.itemActive = ''
					this.father = ''
				}
				else{
					this.itemActive = id;
					this.father = father
				}
				
			},
			changeDriverFun(){
				if(this.itemActive == ''){
					this.$toast({
						title:'请选择更换司机原因'
					});
					return 
				}
				let explain = ''
				if(this.itemActive!==-1){
					const filter1 = this.list.filter((item)=>{
						if(item.id==this.father){
							return item
						}
					})
					const explainArr = filter1[0].reason.filter(item=>{
						if(item.id==this.itemActive){
							return item
						}
					})
					explain = explainArr[0].detail
				}
				else{
					explain = this.$refs.reason.otherModel
				}
				
				if(this.type=='CHANGE'){
					changeDriver({
						id:this.id,
						explain
					}).then(res=>{
						if(res.code==1){
							this.$toast({
								title:"申请成功正在为您更换司机"
							})
							
							uni.$emit('orderChange')
							setTimeout(()=>{
								uni.navigateBack({
									
								})
							},1500)
						}
					})
				}
				else if(this.type == 'CANCLE'){
					cancelOrder({
						id:this.id,
						cancel_explain:explain
					}).then(res=>{
						if(res.code==1){
							this.$toast({
								title:"取消成功"
							})
							uni.$emit('orderChange')
							setTimeout(()=>{
								uni.navigateBack({
									
								})
							},1500)
							
						}
					})
				}
			},
			init(type){
				if(type=='CHANGE'){
					uni.setNavigationBarTitle({
						title:'更换司机'
					})
				}
				else if(type=='CANCLE'){
					uni.setNavigationBarTitle({
						title:'取消原因'
					})
				}
			}
		},
		onLoad({type,id}) {
			this.type = type;
			this.id = id;
			this.init(type);	
			this.changeReasonFun();
			
		}
	}
</script>

<style lang="scss" scoped>
	.consider-btn{
	height: 88upx;
	margin-top: 22rpx;
	border-radius: 8upx;
		width: 100%;
		color: #A6A5A5 ;
		
		border-radius: 10rpx;
		background-color: #F9F9F9 ;
	}
	.bottom-con{
	
		
		width: 100%;
		background-color: #fff;
		
		padding: 20upx 40upx;
		.bottom-btn{
			color: #fff;
			background-color:#F29174 ;
			height: 88upx;
			line-height: 88upx;
			border-radius: 8upx;
			&.active{
				background-color:#E85631 !important;
			}
		}
	}
</style>
